<template>
  <div class="sale-content-box">
    <div class="search-box">
      <div>
        <span>商品名称：</span>
        <el-input v-model="searchForm.goodsName" clearable placeholder="请输入商品名称" />
      </div>
      <div>
        <span>商品编码：</span>
        <el-input v-model="searchForm.goodsId" clearable placeholder="请输入商品编码" />
      </div>
      <div>
        <span>上游编码：</span>
        <el-input v-model="searchForm.channelGoodsCode" clearable placeholder="请输入上游编码" />
      </div>
    </div>
    <div class="search-box">
      <div>
        <span>运营商：</span>
        <el-select v-model="searchForm.operator">
          <el-option v-for="item in operatorOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <el-button @click="searchHandle" type="primary">查询</el-button>
      <el-button style="margin-left:0;" @click="resetHandle">重置</el-button>
    </div>
    <div class="table-box">
      <el-table :max-height="tableHeight" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
        :cell-style="{fontSize:'14px',color:'#7b7b7d'}" :data="tableData" stripe>
        <el-table-column type="index" width="55" label="序号" align="left" />
        <el-table-column prop="headImg" label="缩略图" align="left">
          <template v-slot="scope">
            <img width="80px" :src="scope.row.headImg" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="goodsinfo" label="商品信息" align="left" min-width="160">
          <template v-slot="scope">
            <div class="goodsinfo-box">
              <el-link type="primary" @click="lookDetail(scope.row.goodsId)">{{ scope.row.goodsName || '' }}</el-link>
              <div class="unimp">商品编码：{{ scope.row.goodsId  }}</div>
              <div class="unimp">运营商：{{ scope.row.operator  }}</div>
              <div class="unimp">归属地：{{ scope.row.belongingPlace  }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="channelGoodsCode" label="上游编码" align="left">
          <template v-slot="scope">
            {{ scope.row.channelGoodsCode || '' }}
          </template>
        </el-table-column>
        <el-table-column prop="incomeConf" label="佣金规则" align="left" min-width="140">
          <template v-slot="scope">
            <div v-for="item in scope.row.incomeConfList" :key="item">
              {{ item.runState == 1 ? '激活' : item.runState == 2 ? '首充' : '' }}{{ numFormat(item.income) ? '-佣金'+numFormat(item.income)+'元' : '' }}{{ item.freezenDay >= 0 ? '，冻结期'+item.freezenDay+(item.gaveType == 1 ? '天' : item.gaveType == 2 ? '月' : '天') : '' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="shelveTime" label="发布时间" align="left" min-width="120">
          <template v-slot="scope">
            {{ scope.row.shelveTime ? getDateTime(scope.row.shelveTime)[6] : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="Operations" label="操作" align="center" width="120" fixed="right">
          <template v-slot="scope">
            <div class="table-handle-box">
              <el-link style="font-size:14px" type="primary" @click="unshelve(scope.row.goodsId)">下架</el-link>
              <el-link style="font-size:14px;margin-left: 10px;" type="primary"
                @click="pageJump('/goodsManage/cardGoods/goodsZiliao',{goodsId:scope.row.goodsId})">商品资料</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="my-table-footer">
        <el-pagination style="margin-left:auto;" v-model:currentPage="page" v-model:page-size="size"
          :page-sizes="[10, 20, 50, 100]" small :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
  <confirm-pass ref="confirmPassRef" @verification="verification" />
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { getWindowWidthAndHeight, warningDeal, numFormat, successDeal, getDateTime } from '@/utils/utils'
import { useRouter } from 'vue-router'
import api from '../api'
import confirmPass from '@/components/confirmPass.vue'
export default {
  components: {
    confirmPass,
  },
  setup() {
    const router = useRouter()

    const confirmPassRef = ref(null)

    const state = reactive({
      page: 1,
      size: 10,
      total: 0,
      tableHeight: 0,
      searchForm: {},
      tableData: [],

      operatorOptions: [
        {
          value: '中国移动',
          label: '中国移动'
        },
        {
          value: '中国联通',
          label: '中国联通'
        },
        {
          value: '中国电信',
          label: '中国电信'
        },
        {
          value: '中国广电',
          label: '中国广电'
        },
      ],

      chooseGoodsId: null,
    })

    function getTableData() {
      const obj = {
        page: state.page,
        size: state.size,
        ...state.searchForm,
        shelveStatus: 1,
        orderBy: 'id desc'
      }
      api.goodsQryList(obj).then(res => {
        if (res.code == '200') {
          state.tableData = res.data.list
          state.total = res.data.total
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function handleCurrentChange(e) {
      state.page = e
      getTableData()
    }

    function handleSizeChange(e) {
      state.size = e
      getTableData()
    }

    function searchHandle() {
      state.page = 1
      getTableData()
    }

    function resetHandle() {
      state.searchForm = {}
      searchHandle()
    }

    function unshelve(goodsId) {
      state.chooseGoodsId = goodsId
      const title = '是否下架该商品？'
      const msg = '商品下架后，该商品将不能被售卖'
      confirmPassRef.value.dialogShow(title, msg, false)
    }

    function goodsUnshelve(goodsId) {
      const obj = {
        goodsId
      }
      api.goodsUnshelve(obj).then(res => {
        if (res.code == '200') {
          successDeal(res.msg)
          getTableData()
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function verification() {
      goodsUnshelve(state.chooseGoodsId)
      state.chooseGoodsId = null
    }

    function lookDetail(goodsId) {
      router.push({ path: '/goodsManage/cardGoods/goodsDetail', query: { goodsId } })
    }

    function pageJump(path, data) {
      router.push({ path, query: { ...data } })
    }

    onMounted(() => {
      let winHeight = getWindowWidthAndHeight()
      state.tableHeight = winHeight.windowHeight - 160
      getTableData()
    })

    return {
      ...toRefs(state),
      confirmPassRef,
      lookDetail,
      handleCurrentChange,
      handleSizeChange,
      resetHandle,
      searchHandle,
      numFormat,
      unshelve,
      verification,
      getDateTime,
      pageJump,
    }
  }
}
</script>

<style lang="scss" scoped>
.sale-content-box {
  .search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 10px 20px;
    > div {
      width: 300px;
      display: flex;
      align-items: center;
      > span {
        flex-shrink: 0;
        font-size: 14px;
      }
    }
  }
  .table-box {
    margin-top: 10px;
    .goodsinfo-box {
      display: flex;
      flex-flow: column;
      align-items: flex-start;
      > .unimp {
        font-size: 12px;
      }
    }
    .my-table-footer {
      box-sizing: border-box;
      padding-top: 10px;
      padding-bottom: 1px;
      display: flex;
      align-items: center;
    }
  }
}
</style>